<template>
  <a-modal
    title="脱敏配置"
    :visible="visible"
    ok-text="确定"
    cancel-text="取消"
    width="800px"
    :mask-closable="false"
    centered
    @ok.stop="onOK"
    @cancel.stop="onCancel"
  >
    <div class="desensitization-content">
      <!-- 脱敏警告 -->
      <div v-show="showDesensitizationSetting" class="alert-warning">
        <a-icon-font class="icon" type="iconweiwanpeizhi" />
        设置脱敏的字段在导入时默认会转成字符串类型
      </div>
      <!-- 脱敏配置 -->
      <div v-if="showDesensitizationSetting" class="desensitization-setting">
        <!-- 各表脱敏配置 -->
        <a-tabs type="card" size="small">
          <a-tab-pane
            v-for="(table, key, index) in haveSetDesensitization"
            :key="index"
            :tab="key"
            class="tab-content"
          >
            <div class="desensitization-header">
              <span class="content-column column-field">字段(列)名称</span>
              <span class="content-column import-or-not">是否导入</span>
              <span class="content-column column-boolean">脱敏</span>
              <span class="content-column column-type">
                <span>脱敏类型</span>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span
                      >标注敏感字段的类型，以便于我们更好的保护您的数据安全
                      !</span
                    >
                  </template>
                  <a-icon-font type="iconbangzhu" />
                </a-tooltip>
              </span>
              <span class="content-column column-way">脱敏方式</span>
            </div>
            <!-- 要导入的字段 -->
            <div class="desensitization-inner scroll-bar">
              <div
                v-for="(column, key1, index1) in table"
                :key="index1"
                class="field-item"
              >
                <!-- 字段名称  -->
                <div class="content-column column-field">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ key1 }}</span>
                    </template>
                    <span class="field-name">{{ key1 }}</span>
                  </a-tooltip>
                </div>
                <!-- 是否导入  -->
                <span class="content-column import-or-not">
                  <a-switch v-model="column.importColumn" size="small" />
                </span>
                <!-- 脱敏开关  -->
                <span class="content-column column-boolean">
                  <a-switch
                    v-model="column.masking"
                    :disabled="!column.importColumn"
                    size="small"
                  />
                </span>
                <!-- 脱敏类型  -->
                <span class="content-column column-type">
                  <a-select
                    v-model="column.dataLevelId"
                    placeholder="请选择"
                    size="small"
                    style="width: 120px;"
                    :disabled="!column.masking || !column.importColumn"
                  >
                    <a-select-option
                      v-for="(item, index2) in listDataLevel"
                      :key="index2"
                      :value="item.id"
                      >{{ item.name }}</a-select-option
                    >
                  </a-select>
                </span>
                <!-- 脱敏方式  -->
                <span class="content-column column-way">
                  <a-select
                    v-model="column.dataMaskingType"
                    placeholder="请选择"
                    size="small"
                    style="width: 120px;"
                    :disabled="!column.masking || !column.importColumn"
                  >
                    <a-select-option
                      v-for="(mask, index2) in listMaskingType"
                      :key="index2"
                      :value="mask.maskingType"
                      >{{ mask.maskingTypeName }}</a-select-option
                    >
                  </a-select>
                </span>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- empty -->
      <div v-if="!showDesensitizationSetting" class="empty-info">
        <img alt="" src="@/assets/view/dataview-empty.svg" />
        <p>
          暂未发现有效导入字段 (列) ! <br />
          请在 " <strong> 导入数据</strong> " 根据数据类型导入数据
        </p>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts">
/**
 * 数据信息 脱敏/定时设置弹框
 */
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import DataUploadStore from '@/store/modules/data-upload'
import { cloneDeep } from 'lodash'

@Component({
  components: {},
})
export default class DataInfoSettingModal extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  /* 定时配置传入参数 */
  @Prop() selectedDatabaseType!: string
  @Prop() selectedDataType!: string
  @Prop({
    type: Object,
    default() {
      return null
    },
  })
  selectedTableData!: object
  /* 脱敏配置传入参数 */
  @Prop({ type: Array, default: [] }) datasetData!: object

  public haveSetDesensitization: any = null // 导入/脱敏配置

  // 显示警告
  public get showDesensitizationSetting() {
    return this.haveSetDesensitization
      ? Object.keys(this.haveSetDesensitization).length > 0
      : false
  }

  public get listDataLevel() {
    return DataUploadStore.getListDataLevel
  }
  // 脱敏方式
  public get listMaskingType() {
    return DataUploadStore.getListMaskingType
  }

  /**
   * 脱敏配置弹框显示， 深拷贝脱敏配置
   * @param value
   */
  @Watch('visible')
  public visibleChange(value: boolean) {
    if (value) {
      this.haveSetDesensitization = cloneDeep(
        DataUploadStore.haveSetDesensitization
      )
    }
  }

  /** 确定 */
  public onOK() {
    this.$emit('confirm', {
      desensitization: this.haveSetDesensitization,
    })
  }

  /** 取消 */
  public onCancel() {
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding: 0;
}

.desensitization-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 400px;

  /deep/ .ant-tabs-card-bar {
    margin-bottom: 0;
  }
  // 警告
  .alert-warning {
    background-color: #fffbe6;
    margin-bottom: 8px;
    padding: 8px 24px;

    .icon {
      margin-right: 5px;
    }
  }
  // 内容
  .desensitization-setting {
    padding: 0 24px;

    /* 头 */
    .desensitization-header {
      font-weight: 600;
      width: 100%;
    }

    /* 内容 */
    .desensitization-inner {
      height: 275px;
      width: 100%;

      .field-item {
        align-items: center;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        height: 40px;
        width: 100%;
      }
    }

    .content-column {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }

    /* table header body 字段名称宽度 */
    .column-field {
      width: 150px;

      .field-name {
        display: inline-block;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .import-or-not {
      width: 80px;
    }

    /* table header body 脱敏开关名称宽度 */
    .column-boolean {
      width: 80px;
    }

    /* table header body 脱敏类型宽度 */
    .column-type {
      width: 150px;
    }

    /* table header body 脱敏方式宽度 */
    .column-way {
      width: 150px;
    }
  }
  /* 为空 */
  .empty-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
  }

  .scroll-bar {
    overflow-y: auto;

    /* 滚动条 */

    &::-webkit-scrollbar {
      height: 10px;
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #333;
    }

    &::-webkit-scrollbar-corner {
      background: #179a16;
    }
  }
}
</style>
